<template>
    <div class="zjbox">
        <mytop>
            <template v-slot:zhangjie>
                <span class="topml">目录</span>
            </template>
        </mytop>
        <div class="zjtop" ref="zjtop">
            <div class="zjtopleft">
                <img :src="this.$store.state.book.bookimg" alt="">                
            </div>
            <div class="zjtopright">
                <p>{{this.$store.state.book.booktitle}}</p>
                <span>{{this.$store.state.book.bookpeople}}</span>
            </div>
        </div>
        <div class="zjdown">
            <span>共{{this.$store.state.book.bookzjsl}}章</span>

            <span>倒序</span>
        </div>

        <div class="zjzz" :style="{height:allgao + 'px'}" ref="zjtopzz">
            <ul class="zjxq" ref="ul">
                <li v-for="(item,index) in somezj" :key="index" @click="tiaozhuan(item.secId,index)" :class="{dang:now==index}">
                    {{item.title}}
                </li>
            </ul>
        </div>
    </div>
</template>
<script>
import mytop from "../small/mytop.vue"
import loading from "../small/loading.vue"
export default {
    name:'zj',
    mounted(){
        this.$store.commit('changenavshow', false)
        this.getgao()
        // 添加滚动事件
        this.$refs.zjtopzz.addEventListener('scroll', this.listscroll)
        this.getzj()
        this.now = this.$store.state.bookdetail.nowzj
    },
    components:{
        mytop,
        loading
    },
    data(){
        return{
            allgao:0,
            somezj:[],
            next:0,
            now:0,
            // hmw:false
        }
    },
    methods:{
        getgao(){
            let windowHeight = document.documentElement.clientHeight || documentbody.clientHeight;
            // console.log(this.$refs.zjtop.offsetHeight)
            this.allgao = windowHeight - this.$refs.zjtop.offsetHeight - 70
        },
        listscroll(){
            // scrollTop是当前滚去的高度
            let scrollTop = this.$refs.zjtopzz.scrollTop
            //变量windowHeight是可视区的高度
            let windowHeight = this.$refs.zjtopzz.clientHeight
            // scrollHeight是文档的总高
            let  scrollHeight = this.$refs.ul.scrollHeight
            // 判断滚到底了
            if(scrollTop + windowHeight + 0.5 >= scrollHeight){
                // this.hmw = true
                this.getzj()
                // console.log("滚到底了")
            }
        },
        getzj(){
            this.next += 1
            let number = this.next * 10
            if(this.next * 10 >= this.$store.state.bookdetail.allzj.length){
                // console.log("没了")
                this.somezj = this.$store.state.bookdetail.allzj.slice((this.next-1)*10)
            }else{
                // console.log("还有")
                this.somezj = this.$store.state.bookdetail.allzj.slice(0,number)
            }
            // this.hmw = false
        },
        tiaozhuan(value,num){
            // console.log(this.$route)
            if(this.$route.path == '/bookdetail'){
                this.$store.commit("bookdetail/changebooknld",true)
                this.$store.commit("bookdetail/changebooknowzj",num)
                this.now = num
            }else{
                this.$store.commit("bookdetail/changebooknowzj",num)
                this.$router.push("/bookdetail")
            }
        }
    }
}
</script>
<style lang="less">
@import '../other/all.less';
.topml{
    text-align: left;
}
.zjtop{
    padding-top:80px;
    width: 90%;
    // background-color: red;
    margin:0 auto;
    display: flex;
    .zjtopleft{
        width: 25%;
        margin-right: 30px;
        img{
            width: 100%;
        }
    }
    .zjtopright{
        font-size: 0.5rem;
        text-align: left;
        p{
            margin: 0;
            margin-top:0px;
            margin-bottom: 10px;
        }
        span{
            font-size: 0.4rem;
            color:@allcolor1;
        }
    }
}
.zjdown{
    font-size:0.4rem;
    display:flex;
    justify-content: space-between;
    width: 90%;
    height:30px;
    margin:20px auto;
    span{
        color:@allcolor1;
        line-height: 30px;
        &:nth-child(2){
            border:1px solid @allcolor1;
            border-radius: 10px;
            display:inline-block;
            padding:0px 5px;
        }
    }
}
.zjxq{
    width: 90%;
    margin:0 auto;
    text-align: left;
    font-size: 0.4rem;
    padding-bottom: 20px;
    li{
        // padding-left:10px;
        padding: 15px;
        border-bottom: 1px dashed @allcolor5;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .dang{
        color:@allcolor2;
    }
}
.zjzz{
    // height:;
    overflow-y: scroll;
}
.last{
    height:30px;
    border:0px !important;
}
</style>